<template>
  <div>
    <table border="1" width="100%" style="text-align: center">
      <tr>
        <th>学员编号</th>
        <th>学籍号</th>
        <th>学员姓名</th>
        <th>学员性别</th>
        <th>学员年龄</th>
        <th>身份证信息</th>
        <th>出生日期</th>
        <th>手机号码</th>
        <th>入学时间</th>
        <th>教育程度</th>
        <th>学历提升</th>
        <th>家庭住址</th>
        <th>年级编号</th>
        <th>QQ号码</th>
        <th>微信号码</th>
        <th>邮箱</th>
        <th>操作</th>
      </tr>
      <!--            展示到页面上的数据 用的对象数组-->
      <tr v-for="(students,index) in students" :key="students.studentId">
        <td>{{ students.studentId }}</td>
        <td>{{ students.studentNumber }}</td>
        <td>{{ students.studentName }}</td>
        <td>{{ students.studentGender }}</td>
        <td>{{ students.studentAge }}</td>
        <td>{{ students.studentCard }}</td>
        <td>{{ students.brithday }}</td>
        <td>{{ students.studentPhone }}</td>
        <td>{{ students.enrolTime }}</td>
        <td>{{ students.enrolEducation }}</td>
        <td>{{ students.educationPromotion }}</td>
        <td>{{ students.studnetAddress }}</td>
        <td>{{ students.gradeId }}</td>
        <td>{{ students.qqAccount }}</td>
        <td>{{ students.wechatAaccout }}</td>
        <td>{{ students.email }}</td>
        <td><a href="#" @click.prevent="del(students.studentId)">删除</a>&nbsp;&nbsp;<a href="#" @click.prevent="update(students.studentId)">修改</a>
        </td>
      </tr>
    </table>
    <br>
    <hr/>
    <hr/>
    <hr/>
<!--    这里添加的v-show是 如果显示为修改时候 则显示学生id 如果为添加的时候 则不显示学生id-->
    <div v-show="student.studentId">
      <el-input v-model="student.studentId" placeholder="学员编号"></el-input>
    </div>
    <el-input v-model="student.studentNumber" placeholder="学籍号"></el-input>
    <el-input v-model="student.studentName" placeholder="学员姓名"></el-input>
    <el-input v-model="student.studentGender" placeholder="学员性别"></el-input>
    <el-input v-model="student.studentAge" placeholder="学员年龄"></el-input>
    <el-input v-model="student.studentCard" placeholder="身份证信息"></el-input>
    <el-input v-model="student.brithday" placeholder="出生日期"></el-input>
    <el-input v-model="student.studentPhone" placeholder="手机号码"></el-input>
    <el-input v-model="student.enrolTime" placeholder="入学时间"></el-input>
    <el-input v-model="student.enrolEducation" placeholder="教育程度"></el-input>
    <el-input v-model="student.educationPromotion" placeholder="学历提升"></el-input>
    <el-input v-model="student.studnetAddress" placeholder="家庭住址"></el-input>
    <el-input v-model="student.gradeId" placeholder="年级编号"></el-input>
    <el-input v-model="student.qqAccount" placeholder="QQ号码"></el-input>
    <el-input v-model="student.wechatAaccout" placeholder="微信号码"></el-input>
    <el-input v-model="student.email" placeholder="邮箱"></el-input>
    <el-button type="success" @click="commit">修改|保存</el-button>
    <el-button type="danger" @click="reset">重置</el-button>
  </div>
</template>

<script>
import instance from "../../utils/request";//引入axios实例
export default {
  name: "Student",
  data() {
    return {
      student: [],
      students: {}
    }
  },
  methods: {
    commit() {
      //提交操作
      if (!this.student.studentNumber) {
        alert('学生学号不能为空')
        return false;
      }
      if (!this.student.studentName) {
        alert('学生姓名不能为空')
        return false;
      }
      if (!this.student.studentGender) {
        alert('学生性别不能为空')
        return false;
      }
      instance.post("/student", this.student).then(respose => {
        this.student = {};
        this.findAll();
        alert('操作成功');
      })
    },
    reset() {
      this.student = {};
    },
    findAll() {
      instance.get("/student").then(resp => {
        this.students = resp.data;
      })
    },
    del(studentId) {
      if (confirm('确定要删除这条数据吗')) {
        instance.delete("/student/" + studentId).then(resp => {
          this.findAll();
        })
      }
    },
    update(studentId) {
      instance.get("/student/" + studentId).then(resp => {
        this.student = resp.data;
      })
    },
  },
  created() {
    this.findAll()
    if (this.$store.state.roleId == 0){
      this.$message('请先登录');
      this.$router.push({name:'Login'});
    }
  },
}
</script>

<style scoped>

</style>
